Parent এবং Child Components এর মধ্যে ডেটা পাস করা

Riot.js-এ Parent এবং Child কম্পোনেন্টের মধ্যে ডেটা পাস করার জন্য Props বা opts ব্যবহার করা হয়। Parent Component থেকে Child Component এ ডেটা পাস করার জন্য opts ব্যবহার করা হয়, যেখানে Parent Component থেকে পাস করা ডেটা Child Component এ প্রোপস হিসেবে পাওয়া যায়।

এখানে, আমরা একটি Parent এবং Child কম্পোনেন্ট তৈরি করব, যেখানে Parent Component তার Child Component-এ ডেটা পাঠাবে।

১. Parent থেকে Child এ ডেটা পাস করা (Props বা opts)

Riot.js-এ Parent কম্পোনেন্ট থেকে Child কম্পোনেন্টে ডেটা পাস করার জন্য opts ব্যবহার করা হয়। opts হল এমন একটি অবজেক্ট যা Parent থেকে Child-এ ডেটা পাস করার জন্য ব্যবহৃত হয়।

উদাহরণ:

Parent Component (App.riot)

<!-- src/components/App.riot -->
<app>
  <h1>Welcome to Riot.js</h1>

  <!-- Parent কম্পোনেন্ট থেকে Child কম্পোনেন্টে ডেটা পাস করা -->
  <child-component title={parentTitle} message={parentMessage}></child-component>

  <button onclick={changeMessage}>Change Message</button>

  <script>
    import './Child.riot';

    export default {
      onMounted() {
        this.parentTitle = 'Hello from Parent!';
        this.parentMessage = 'This is a message from the parent.';
      },

      changeMessage() {
        this.parentMessage = 'The message has been updated from Parent!';
      }
    }
  </script>
</app>

এখানে, parentTitle এবং parentMessage ডেটা Child Component-এ title এবং message নামে প্রোপস হিসেবে পাস করা হচ্ছে।

Child Component (Child.riot)

<!-- src/components/Child.riot -->
<child-component>
  <h2>{opts.title}</h2>
  <p>{opts.message}</p>

  <script>
    export default {
      onMounted() {
        console.log('Child component mounted!');
      }
    }
  </script>
</child-component>

এখানে:

• Child Component এর মধ্যে opts.title এবং opts.message ব্যবহার করা হচ্ছে, যা Parent Component থেকে প্রাপ্ত ডেটা।
• Parent কম্পোনেন্ট যখন parentTitle বা parentMessage পরিবর্তন করে, Child কম্পোনেন্ট সেই নতুন ডেটা স্বয়ংক্রিয়ভাবে রেন্ডার করবে।

২. Child থেকে Parent-এ ডেটা পাঠানো (Events)

Child Component থেকে Parent Component-এ ডেটা পাঠাতে হলে Riot.js এ emit ইভেন্ট ব্যবহার করতে হয়। emit ফাংশনটি একটি কাস্টম ইভেন্ট তৈরি করে, এবং Parent Component সেই ইভেন্টটি শুনতে (listen) পারে।

উদাহরণ:

Parent Component (App.riot)

<!-- src/components/App.riot -->
<app>
  <h1>Welcome to Riot.js</h1>

  <!-- Parent কম্পোনেন্টে Child থেকে পাঠানো ডেটা -->
  <child-component title={parentTitle} onchildEvent={handleChildEvent}></child-component>

  <p>{childMessage}</p>

  <script>
    import './Child.riot';

    export default {
      onMounted() {
        this.parentTitle = 'Hello from Parent!';
        this.childMessage = '';
      },

      handleChildEvent(event) {
        this.childMessage = event.detail;  // Child থেকে পাওয়া ডেটা
      }
    }
  </script>
</app>

এখানে:

• onchildEvent={handleChildEvent} Parent কম্পোনেন্টের childEvent ইভেন্টে একটি হ্যান্ডলার যোগ করছে।
• handleChildEvent ফাংশনটি Child Component থেকে পাঠানো ডেটা গ্রহণ করছে (এটি event.detail এর মাধ্যমে).

Child Component (Child.riot)

<!-- src/components/Child.riot -->
<child-component>
  <h2>{opts.title}</h2>
  <p>{opts.message}</p>

  <button onclick={notifyParent}>Notify Parent</button>

  <script>
    export default {
      notifyParent() {
        this.emit('childEvent', 'Hello Parent, I am the Child!');
      }
    }
  </script>
</child-component>

এখানে:

• notifyParent ফাংশনটি childEvent নামে একটি কাস্টম ইভেন্ট তৈরি করছে এবং Parent কম্পোনেন্টে ডেটা পাঠাচ্ছে।
• this.emit('childEvent', 'Hello Parent, I am the Child!') এই ইভেন্টটি Parent কম্পোনেন্টে পাঠানো হচ্ছে।

সারাংশ

1. Parent থেকে Child এ ডেটা পাস করতে opts বা প্রোপস ব্যবহার করা হয়।
2. Child থেকে Parent-এ ডেটা পাঠাতে হলে emit ফাংশন এবং কাস্টম ইভেন্ট ব্যবহার করা হয়।
3. Child Component একটি ইভেন্ট emit করলে Parent Component সেই ইভেন্টটি গ্রহণ করতে পারে এবং ডেটা ব্যবহার করতে পারে।

এভাবে, Riot.js-এ Parent এবং Child Components এর মধ্যে ডেটা আদান-প্রদান করা হয়।